<template>
	<view class="container">
		<view @click="showPicker=true">
			<text class="year">2022<text>年</text></text>
			<text class="triangle" :style="{'transform': showPicker?'rotate(180deg)':'none'}"></text>
		</view>
		<u-picker style="position: absolute;" :show="showPicker" :columns="columns" @cancel="close" @confirm="confirm" :defaultIndex="defaultIndex">
		</u-picker>
		<view style="padding: 0;">
			<view v-for="(item,key) in salaryList" :key="key" class="salaryListItem">
				<text>{{item.month}}</text>
				<text>{{item.money}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPicker: false,
				columns: [
					[],
				],
				defaultIndex:[3],
				salaryList:[
					{month:'2022年12月',money:'+500元'},
					{month:'2022年11月',money:'+50元'},
					{month:'2022年10月',money:'+50元'},
					{month:'2022年9月',money:'+50元'},
				]
			}
		},
		onLoad() {
			const years = new Date().getFullYear()
			for (let i = years - 3; i <= years + 3; i++) {
				this.columns[0].push(i);
			}
			console.log(this.columns)
		},
		methods: {
			confirm() {
				this.close()
			},
			close() {
				this.showPicker = false
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #FAFAFA;
	}

	.container {
		margin-top: 24rpx;
		background: #fff;

		&>view {
			padding: 26rpx 32rpx;

			.year {
				font-weight: 600;
				color: #333333;
				font-size: 48rpx;

				text {
					margin-left: 10rpx;
					font-weight: 400;
					font-size: 24rpx;
				}
			}

			.triangle {
				width: 0;
				height: 0;
				border-left: 4px solid transparent;
				border-right: 4px solid transparent;
				border-bottom: 6px solid #333;
				vertical-align: middle;
				margin-left: 6rpx;
			}
			.salaryListItem{
				display: flex;
				justify-content: space-between;
				padding: 36rpx 32rpx;
				&>text:nth-child(1){
					font-size: 32rpx;
					font-weight: 500;
					color: #333;
					line-height: 44rpx;
				}
				&>text:nth-child(2){
					font-size: 32rpx;
					font-weight: 500;
					color: #111;
					line-height: 44rpx;
				}
			}
		}
	}
</style>
